<template>
  <div>
    <div class="lunbo-top">
      <el-button type="primary" @click="dialogFormVisible = true">添加测试<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>
    <!--  心里测评表格  -->
    <el-table
        :data="xinliTable"
        border

        :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}"
        style="width: 91%">
      <el-table-column
          fixed
          prop="id"
          align="center"
          label="心理测试ID"
          width="120">
      </el-table-column>
      <el-table-column
          fixed
          prop="psychologicalImg"
          align="center"
          label="心理测试头像"
          width="120">
        <template slot-scope="scope">
          <img :src="scope.row.psychologicalImg" style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column
          fixed
          prop="psychologicalContent"
          align="center"
          label="心理测试类型"
          width="135">
      </el-table-column>
      <el-table-column
          fixed
          prop="testquestions.id"
          align="center"
          label="测试题目问答"
          width="900">
        <template slot-scope="scope">
          <div v-if="scope.row.testquestions && scope.row.testquestions.length" style="display: flex; flex-direction: column;">
            <div v-for="(question, index) in scope.row.testquestions.slice(0, 5)" :key="index" style="display: flex; flex-direction: row; align-items: center; margin-bottom: 5px;">
              <span style="margin-right: 10px;">{{ question.id }}</span>
              <span>{{ question.questionName }}</span>
              <span style="margin-left: 20px;">{{ question.questionSummary }}</span>
            </div>
          </div>
          <div v-else>无测试题目</div>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="200"
          align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="dialogFormVisible3 = true,updateceping(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteceping(scope.row)">删除测评</el-button>
          <el-button type="text" size="small" @click="dialogFormVisible2 = true,deletewenda(scope.row)">删除问答</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增信息弹框-->
    <div>
      <el-dialog title="输入新增信息" :visible.sync="dialogFormVisible">
        <el-upload
            class="upload-demo"
            action="http://localhost:8081/Xinli/upload"
            enctype="multipart/form-data"
            name="file"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        输入心理测评序号：<el-input v-model="insertid" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        输入心理测评类型：<el-input v-model="nametype" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        输入测试问答题目：<el-input v-model="question" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        输入测试问题答案：<el-input v-model="answer" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">放弃添加</el-button>
          <el-button type="primary" @click="insertlunbo">确定添加</el-button>
        </div>
      </el-dialog>
    </div>
<!--删除问答弹框-->
    <div>
      <el-dialog title="输入删除的信息" :visible.sync="dialogFormVisible2">
        相关心理问答ID：<el-input v-model="wendaid" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        输入删除问答ID：<el-input v-model="shanchuid" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">放弃删除</el-button>
          <el-button type="primary" @click="deletewenda2">确定删除</el-button>
        </div>
      </el-dialog>
    </div>

    <!--修改测评弹框-->
    <div>
      <el-dialog title="输入修改测评的信息" :visible.sync="dialogFormVisible3">
        测评名称：<el-input v-model="cepingtype" style="width: 50%;margin-left: 20px;margin-top: 30px"></el-input><br>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">放弃修改</el-button>
          <el-button type="primary" @click="updateceping1">确定修改</el-button>
        </div>
      </el-dialog>
    </div>

  </div>


</template>

<script>
    export default {
        name: "xinliceping",
      data:function (){
        return {
          fileList:[],
          xinliTable:[],
          dialogFormVisible:false,
          dialogFormVisible2:false,
          dialogFormVisible3:false,
          insertid:'',
          nametype:'',
          question:'',
          answer:'',
          cepingid:'',
          wendaid:'',
          shanchuid:'输入问答ID，只可以选1个ID哦',
          cepingtype:''

        }

      },
      /*初始方法，页面加载的时候方法同时执行*/
      created: function (){
        this.selectAll();
      },
      /*普通方法会触发事件*/
      methods:{
        /*查询所有心理测评*/
        selectAll(){
          /*请求数据*/
          this.axios.post("/Xinli/xinliceping",{

          }).then((res)=>{
            console.log(res.data.data);
            this.xinliTable=res.data.data;
          }).catch((err)=>{

          })
        },
        /*新增图片组件佩戴方法*/
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
        /*新增测评和问答*/
        insertlunbo(){
          /*请求数据
          * String name = map.get("name");
            String question = map.get("question");
            Integer id = Integer.parseInt(map.get("id"));
            String answer = map.get("answer");
          * */
          console.log(this.insertid);
          console.log(this.nametype);
          console.log(this.question);
          console.log(this.answer);
          this.axios.post("/Xinli/insertall",{
            name:this.nametype,
            question:this.question,
            id:this.insertid,
            answer:this.answer,
          }).then((res)=>{
            this.selectAll()
          }).catch((err)=>{

          })
          this.dialogFormVisible=false
        },
        /*删除问答传数据*/
        deletewenda(row){
          console.log("================================")
          console.log(row)
          // 使用map方法提取每个question的id，并使用join方法将它们拼接成一个字符串
          this.wendaid = row.testquestions.slice(0, 5).map(function(question) {
            return question.id; // 返回每个question的id
          }).join(', '); // 使用逗号加空格作为分隔符将id拼接起来
          console.log(this.wendaid);
        },
        /*删除问答数据*/
        deletewenda2(){
          /*请求数据*/
          console.log(this.shanchuid);
          this.axios.post("/Xinli/deletecwenda",{
            shanchuid:this.shanchuid,
          }).then((res)=>{
            this.selectAll();
          }).catch((err)=>{

          })
          this.dialogFormVisible2=false
        },
        /*删除测评*/
        deleteceping(row){
          /*请求数据*/
          this.axios.post("/Xinli/deleteceping",{
            cepingid:row.id,
          }).then((res)=>{
            this.selectAll()
          }).catch((err)=>{

          })
        },
        /*修改传输数据*/
        updateceping(row){
          this.cepingid = row.id;
          this.cepingtype = row.psychologicalContent;
        },
        /*修改数据*/
        updateceping1(){
          /*请求数据*/
          this.axios.post("/Xinli/updateceping",{
            cepingid:this.cepingid,
            name:this.cepingtype,
          }).then((res)=>{
            this.selectAll()
          }).catch((err)=>{

          })
          this.dialogFormVisible3 = false
        }
      }
    }
</script>

<style scoped>
.lunbo-top{
  margin-bottom: 20px;
}
</style>